<template>
  <!-- icon图标 -->
  <div class="detail-page">
    <van-nav-bar
      :title="objres.community"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 轮播 -->
    <van-swipe :autoplay="1000" :height=220 indicator-color='#888888'>
      <van-swipe-item touchable v-for="(image, index) in img" :key="index">
        <!-- <img v-lazy="image" /> -->
      </van-swipe-item>
    </van-swipe>
    <!-- 房屋名字 -->
    <div class="name">
      <p>{{objres.title}}</p>
      <div class="tags">
        <span v-for="(item,index) in objres.tags" :key='index'>{{item}}</span>
      </div>
    </div>

    <!-- 价格 -->
    <ul class="housePrice">
      <li>
        <p>{{objres.price}}<span>/月</span></p>
        <p>租金</p>
      </li>
      <li>
        <p>{{objres.roomType}}</p>
        <p>房型</p>
      </li>
      <li>
        <p>{{objres.size}}平米</p>
        <p>面积</p>
      </li>
    </ul>

    <!-- 住房信息 -->
    <ul class="houseInfo">
      <li>
        <span>装修：</span>
        <span>精装</span>
      </li>
      <li>
        <span>朝向：</span>
        <span v-for="(item,index) in objres.oriented" :key="index">{{item}}</span>
      </li>
      <li>
        <span>楼层：</span>
        <span>{{objres.floor}}</span>
      </li>
      <li>
        <span>类型：</span>
        <span>普通住宅</span>
      </li>
    </ul>

    <div class="xiaoqu"><span>小区：</span><span>天山星城</span></div>
    <!-- 百度地图 -->
    <!-- 房屋配套 -->
    <div class="fwpeotao">
      <h3 class="fangwu">房屋配套</h3>
      <div class="list">
        <!-- <van-grid square :border="false" :column-num="5">
          <van-grid-item class="iconfont icon-wifi" v-for="value in objres.supporting" :key="value" :text="value" />
        </van-grid> -->
        <ul class="xuanxiang">
          <li
            v-for="(value,index) in classIconList" :key="index"
          >
            <div :class="value.classIcon">
            </div>
            {{ value.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 房源概况 -->
    <h3 class="fangwu">房屋概况</h3>
    <!-- <van-card
      desc="已认证房主"
      title="王女士"
      thumb="http://liufusong.top:8080/img/avatar.png"
    /> -->
    <div class="userInfo">
      <div class="demo">
        <div class="infoImg">
          <img src="http://liufusong.top:8080/img/avatar.png" alt="" srcset="">
        </div>
        <div class="txt">
          <p>王女士</p>
          <p class="red"><span></span><span>已认证房主</span></p>
        </div>
      </div>
      <button>发消息</button>
    </div>
    <p class="jieshao">
      1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。 2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。 3.人车分流，环境优美。 4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
    </p>
    <!-- 猜你喜欢 -->
    <h3 class="fangwu">猜你喜欢</h3>
    <van-card v-for="(item,index) in loveList" :key="index"
              :desc="item.desc"
              :title="item.title"
              :thumb='item.houseImg'
              :lazy-load="true"
    >
      <template #tags>
        <div class="youdian">{{item.tags[0]}}</div>
        <div class="price">{{item.price}}<span>元/月</span></div>
      </template>
    </van-card>
    <!-- 底部 -->
    <ul class="footer">
      <li @click="change">
        <img ref="icon" :src="scicon" alt="" srcset="">
        收藏
      </li>
      <li>
        在线咨询
      </li>
      <li>
        电话预约
      </li>
    </ul>
  </div>
</template>

<script>
import { houseDetail, collectHouse, xcollect, xycollect } from '@/api/house'
export default {
  name: 'HmDetail',
  data () {
    return {
      objres: {},
      img: [],
      scicon: '',
      isShowImg: '',
      peitaoList: [
        { name: '衣柜', isSelected: false, classIcon: 'iconfont icon-yigui-hui' },
        { name: '洗衣机', isSelected: false, classIcon: 'iconfont icon-xiyiji' },
        { name: '空调', isSelected: false, classIcon: 'iconfont icon-kongdiao' },
        { name: '天然气', isSelected: false, classIcon: 'iconfont icon-tianranqi' },
        { name: '冰箱', isSelected: false, classIcon: 'iconfont icon-bingxiang' },
        { name: '暖气', isSelected: false, classIcon: 'iconfont icon-nuanqi' },
        { name: '电视', isSelected: false, classIcon: 'iconfont icon-dianshi' },
        { name: '热水器', isSelected: false, classIcon: 'iconfont icon-haofangtuo400iconfont2reshuiqi' },
        { name: '宽带', isSelected: false, classIcon: 'iconfont icon-wifi' },
        { name: '沙发', isSelected: false, classIcon: 'iconfont icon-shafa' }
      ],
      classIconList: [],
      loveList: [
        {
          desc: '72.32㎡/南 北/低楼层',
          title: '安贞西里 3室1厅',
          houseImg: 'http://liufusong.top:8080/img/message/1.png',
          tags: ['随时看房'],
          price: 4500
        },
        {
          desc: '83㎡/南/高楼层',
          title: '天居园 2室1厅',
          houseImg: 'http://liufusong.top:8080/img/message/2.png',
          tags: ['近地铁'],
          price: 7200
        },
        {
          desc: '52㎡/西南/低楼层',
          title: '角门甲4号院 1室1厅',
          houseImg: 'http://liufusong.top:8080/img/message/3.png',
          tags: ['集中供暖'],
          price: 4300
        }
      ]
    }
  },
  async created () {
    // 获取收藏列表
    const res = await houseDetail(this.$route.query.id)
    // console.log(res.body.houseImg)
    this.img = res.body.houseImg.map(item => {
      item = 'http://liufusong.top:8080' + item
      return item
    })
    this.objres = res.body
    console.log(this.objres.supporting)
    this.classIconList = this.peitaoList.filter(item => this.objres.supporting.includes(item.name))
    console.log(this.classIconList)
    // 确认是否收藏
    const res1 = await xycollect(this.objres.houseCode)
    this.isShowImg = res1.body.isFavorite
    if (this.isShowImg) {
      this.scicon = 'http://liufusong.top:8080/img/star.png'
    } else {
      this.scicon = 'http://liufusong.top:8080/img/unstar.png'
    }
  },
  methods: {
    // 切换收藏状态
    async change () {
      if (this.$refs.icon.src === 'http://liufusong.top:8080/img/unstar.png') {
        await collectHouse(this.objres.houseCode)
        this.$toast.success('收藏成功')
      } else {
        await xcollect(this.objres.houseCode)
        this.$toast.success('取消收藏')
      }
      this.$nextTick(() => {
        if (this.$refs.icon.src === 'http://liufusong.top:8080/img/star.png') {
          this.$refs.icon.src = 'http://liufusong.top:8080/img/unstar.png'
        } else {
          this.$refs.icon.src = 'http://liufusong.top:8080/img/star.png'
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
*{
  margin: 0;
  padding: 0;
}
.detail-page{
  padding-bottom: 62px;
}
.van-swipe-item{
  width: 100%;
  height: 100%;
img{
  width: 100%;
  height: 100%;
}
}
.name{
  // background-color: aqua;
  padding: 10px 0 5px 0;
  p{
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin: 10px;
  }
  .tags{
    margin: 10px;
    width: 50px;
    height: 16px;
    color: #39becd;
    background: #e1f5f8;
    font-size: 12px;
    border-radius: 3px;
    padding: 3px;
    text-align: center;
    line-height: 16px;
  }
}
.houseInfo{
  // background-color: red;
  padding: 15px 0;
  margin: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  li{
    width: 50%;
    color: #999;
    margin-top: 8px;
    font-size: 14px;
    span:last-child{
      color: #333;
      margin-left: 10px;

    }
  }
}

.housePrice{
display: flex;
justify-content: space-around;
align-content: center;
padding: 20px 0;
margin: 0 15px;
border-top: 1px solid #e4dfdf;
border-bottom: 1px solid #e4dfdf;
li{
  // background-color: #39becd;
  p:last-child{
    color: #999;
    text-align: center;
  }
  p:first-child{
    color: #fa5741;
    font-size: 18px;
    font-weight: bolder;
    span{
      font-size: 14px;
    font-weight: normal;

    }
  }
}
}
.xiaoqu{
  font-size: 14px;
  color: #333;
  padding-left: 15px;
  border-top: 10px solid #f5f5f5;
  padding: 15px 0 15px 15px;
  // background-color: red;
}
.footer{
  position: fixed;
  bottom: 0;
  z-index: 999;
  height: 60px;
  width: 100%;
  // background-color: #39becd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  li {
    flex: 1;
    height: 100%;
    text-align: center;
    line-height: 60px;
    border-right: 1px solid #e9e4e4;
    border-top: 1px solid #e9e4e4;
    color: #999;
    background-color: #fff;
    img{width: 16px;height: 16px;}
  }
  li:last-child{
    background-color: #21b97a;
    color: #e1f5f8;
  }
}
.fwpeotao {
  .list{
    border-bottom: 10px solid #f5f5f5;
  }
}
.fangwu{
    margin: 0 15px 15px 15px;
    padding: 15px 0;
    border-bottom: 1px solid #d2cdcd;
    // background-color: #21b97a;
  }
  /deep/ .van-image__img{
    width: 60px;
    height: 60px;
  }
  .userInfo{
    font-size: 14px;
    padding: 20px 20px 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .demo{
display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 60px;
      height: 60px;
      margin-right: 18px;
    }
.red{
  color: red;
}
    }
    button{
      width: 70px;
      height: 30px;
      background-color: #fff;
      border:1px solid #21b97a;
      border-radius: 3px;
      color: #21b97a;
    }

  }
  .jieshao{
    padding: 0 10px 10px;
    font-size: 14px;
    border-bottom: 10px solid #f5f5f5;
  }

  .van-card:not(:first-child){
  margin-top: 0;
  border-bottom: 1px solid #e3dbdb;
  background: white;
}
.youdian{
  color: #76cee1;
  background-color: #e1f5f8;
  width: 58px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
}
/deep/ .van-card__title{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.price{
  position: relative;
  top: 4px;
  font-size: 16px;
  font-weight: bolder;
  color: #fa5741;
  span{
    font-size: 12px;
    font-weight: normal;
    padding-left: 4px;
  }
}
.xuanxiang {
  // background-color: #108ee9;
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: space-around;
  li {
    width: 20%;
    text-align: center;
    .iconfont{
      font-size: 24px;
    }
  }
}
</style>
